import { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { Toolbar } from '@todo/ui';
import Box from '@mui/joy/Box';
import ThemeSwitcher from './components/ThemeSwitcher.tsx';
import LanguageSwitcher from './components/LanguageSwitcher.tsx';

const Header: FC = () => {
  return (
    <Toolbar
      sx={{
        position: 'fixed',
        p: 2,
        borderBottom: '1px solid',
        borderColor: 'divider',
        zIndex: 1000,
        top: 0,
        transition: 'width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        backdropFilter: 'blur(8px)',
      }}
    >
      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
        {/*<MenuBuilder />*/}
      </Box>
      <Box>
        <ThemeSwitcher />
        <LanguageSwitcher />
      </Box>
    </Toolbar>
  );
};

export default observer(Header);
